<template>
	<view class="page-content">
		<view class="n_title"><span class="n_back" @click="common.navback()"> < </span>{{title}}</view>
		<view class="content-content">
			<view>
				<view>
					<view class="uni-row">
						<view class="uni-row1-icon"></view>
						<view class="uni-row1-title">
							设备状态
							<view v-if="device.backNum < 3 " class="backNumWaring">设备库存数量不足3套！</view>
						</view>
					</view>
				</view>
				<view class="d-pannel-lg t10">
					<view class="t10">部署时间：{{common.timestampToTime(device.installTime)}}</view>
					<view class="t10">部署区域：{{device.regionPname}} - {{device.regionName}}</view>
					<view class="t10">本周报警：{{device.waringWeek}}件</view>
					<view class="t10">报警未处理：
						<span v-if="device.runSatus=='0'">否</span>
						<span v-if="device.runSatus=='1'">是</span></el-col>
					</view>
					<view class="t10">是否异常：
						<span v-if="device.runSatus=='0'">否</span>
						<span v-if="device.runSatus=='1'">是</span></el-col>
					</view class="t10">
					<view class="t10">报警等级：
						<span v-if="device.runSatus=='0'">无报警</span>
						<span v-if="device.runSatus=='1'">有报警</span>
					</view class="t10">
					<view class="t10">备品备件：仓储备件{{device.reservePartCount}}个</view>
					<view class="t10">对应策略：正常运行无需关注和调整</view>
					<view class="t10">运维计划：{{device.zcOperationPlan}}</view>
					<view class="t10">设备健康度：{{ device.healthLevel }}%</view>
					<view class="t10">备品数：{{device.backNum}}</view>
				</view>
			</view>
			
			
			<view class="t10">
				<view>
					<view class="uni-row">
						<view class="uni-row1-icon"></view>
						<view class="uni-row1-title">传感器数据</view>
					</view>
				</view>
				<view class="t10">
					<view class="d-pannel sensor-item" v-for="(d,dix) in device.sensors" :key="'ds'+dix">
						<view>
							<view class="sensor-item-title">{{d.name}}</view>
							<view class="sensor-item-data">
								<view>
									<view class="uni-row1">
										<view>速度X:{{d.vibrationx}}</view>
										<view>速度:{{d.vibrationy}}</view>
									</view>
								</view>
								<view>
									<view class="uni-row1">
										<view>速度Z:{{d.vibrationz}}</view>
										<view>温度:{{+d.vibrationtemp}}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					
				</view>
			</view>
			
			<view class="t10">
				<view class="uni-row">
					<view class="uni-row1-icon"></view>
					<view class="uni-row1-title">设备健康曲线</view>
				</view>
				<view class="d-pannel-lg t10">
					<view class="uni-row tab-view t10">
						<view :class="healthStatus=='1' ? 'tab tab-act' : 'tab'" @click="healthStatuschange('1')">按天</view>
						<view :class="healthStatus=='2' ? 'tab tab-act' : 'tab'" @click="healthStatuschange('2')">按月</view>
						<view :class="healthStatus=='3' ? 'tab tab-act' : 'tab'" @click="healthStatuschange('3')">按年</view>
					</view>
					<view class="t10 char-view">
						<echarts ref="echarts" :option="optionChat" canvasId="optionChat"></echarts>
					</view>
				</view>
			</view>
			
			<view class="d-pannel t10">
				<view class="uni-row">
					<view class="uni-row1-icon"></view>
					<view class="uni-row1-title">实时报警检测</view>
				</view>
				<view>
					<view v-for="(d,dix) in waring" class="uni-row d-i" :key="'d'+dix">
						<view class="ellipsis d-i-time">{{common.timestampToTimeMils(d.time)}}</view>
						<view class="ellipsis d-i-regionName">{{d.regionName}}</view>
						<view class="ellipsis d-i-name">{{d.name}}</view>
						<view class="ellipsis d-i-waringName">{{d.waringName}}</view>
					</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '',
				id:null,
				device:{},
				healthStatus:'1',
				optionChat:null,
				waring:[],
			}
		},
		onShow(){
			this.getDevice()
			this.getHealth()
			this.getwaring()
		},

		onLoad(query) {
			this.id=query.id
			this.title=query.name
		},
		methods: {
			getDevice(){
				let url='/api/device/info'
				this.common.get(url,{id:this.id},(res)=>{
					if(res.code!=1){
						this.common.showError(res.msg)
						return
					}
					this.device = res.data
				})
			},
			
			healthStatuschange(val){
				this.healthStatus=val
				this.getHealth()
			},
			getHealth(){
				const url = '/api/device/health'
				this.common.getNotLoading(url,{
					id: this.id,
					healthStatus: this.healthStatus
				},(res)=>{
					if(res.code!=1){
						this.common.showError(res.msg)
						return
					}
					let fx =  [
					            {
					              type: 'line',
					              smooth:false,
					              showSymbol: true,
					              areaStyle: {
					                color: {
					                  // color: 'rgba(0, 255, 0, 0.3)'
					                  x: 0,
					                  y: 0,
					                  y2: 1,
					                  x2: 0,
					                  colorStops: [
					                    {
					                      offset: 0,
					                      color: "#22eadd"
					                    },
					                    {
					                      offset: 1,
					                      color: "rgba(34,234,221,0)"
					                    }
					                  ],
					                  type: "linear"
					                }
					
					              },
					              data: res.data.series,
					            }
					          ]
					this.optionChat = this.$echarts.drawLine([],res.data.xaxis,fx)
				})
			},
			getwaring(){
				const url = '/api/device/device-waring'
				this.common.getNotLoading(url,{id:this.id},(res)=>{
					if(res.code!=1){
						this.common.showError(res.msg)
						return
					}
					this.waring = res.data
				})
			},
			
		}
	}
</script>

<style>
	.content-content{
		padding-bottom: 10px;
	}
	.char-view {
		height: 250px;
	}
	.device_num{
		margin-top: 10px;
	}
	.device_num>view{
		width: calc((100% - 20px) / 3);
		text-align: center;
	}
	.device_num1{
		background-image: url('/static/device_num1.png');
		height: 100px;
		aspect-ratio: 114 / 100;
		text-align: center;
		line-height: 100px;
		font-size: 20px;
		font-weight: bold;
		margin-bottom: 10px;
	}
	.device_num2{
		background-image: url('/static/device_num2.png');
		height: 100px;
		aspect-ratio: 114 / 100;
		text-align: center;
		line-height: 100px;
		font-size: 20px;
		font-weight: bold;
		margin-bottom: 10px;
	}
	.device_num3{
		background-image: url('/static/device_num3.png');
		height: 100px;
		aspect-ratio: 114 / 100;
		text-align: center;
		line-height: 100px;
		font-size: 20px;
		font-weight: bold;
		margin-bottom: 10px;
	}
	.deviceTxt{
		height: 35px;
		line-height: 35px;
		margin-top: 10px;
	}
	.deviceTxt > view:first-child{
		width:calc(100% - 90px);
		padding-left: 10px;
	}
	.deviceTxt > view:last-child{
		width: 70px;
	}
	.deviceTxt1{
		background: linear-gradient(to right,rgba(2,161,249,1) 10%, rgba(41,241,156,1) 50%, #374462 0%)
	}
	.deviceTxt2{
		background: linear-gradient(to right,rgba(1,94,234,1) 10%, rgba(0,192,250,1) 30%, #374462 0%);
	}
	.deviceTxt3{
		background: linear-gradient(to right, #5865B9,#1C91E2 10%,#22DCFD 60%, #374462 0%);
	}
	.deviceTxt4{
		background: linear-gradient(to right, #FF544F  10%,#FAD126 65%, #374462 0%);
	}
	.d-i{
		background: linear-gradient(92deg,#ff764e, rgba(255,118,78,0));
		margin-top: 5px;
		padding-left: 5px;
	}
	.sensor-item-title{
		width: 80%;
		margin-left: 10%;
		text-align: center;
		background: #15203c;
		height: 30px;
		line-height: 30px;
		border-radius: 10px;
	}
	.sensor-item-data{
		width: 70%;
		margin-left: 15%;
		margin-top: 10px;
		color: #cbcfd7;
	}
	.sensor-item{
		margin-top: 10px;
	}
	.backNumWaring{
	  text-align: right;
	  color: red;
	  position: absolute;
	  margin-top: -20px;
	  right: 10px;
	}
	.d-i-time{
		width: 40%;
	}
	.d-i-regionName{
		width: 15%;
	}
	.d-i-name{
		width: 18%;
	}
	.d-i-waringName{
		width: 17%;
	}
</style>
